<template>
    <div style="height: 100%;">
        <template v-if="list.length > 0">
           <div v-for="(item, index) in list" :key="index" class="class-tab" >
            <div class="bottom-shadow clearfix" style="position: relative;">
                <div @click="jump(item.itm_id)" style="background: #ffffff;padding: 32px 20px 20px;overflow:hidden;border-top-right-radius: 8px;border-top-left-radius: 8px;">
                    <div class="class-tab-nav">{{item.itm_title}}</div>
                    <div class="class-tab-title">{{ $t("cos_enroll_duration") }}</div><!--报名期限-->
                    <div class="class-tab-date">
                        {{ $t("time_from") }} {{item.itm_appn_start_datetime | substringTime}} {{ $t("time_to") }} {{item.itm_appn_end_datetime | substringTime}}
                    </div>
                    <div class="class-tab-title">{{ $t("cos_training_duration") }}</div><!--培训期限-->
                    <div class="class-tab-date">
                        {{ $t("time_from") }} {{item.itm_content_eff_start_time | substringTime}} {{ $t("time_to") }} {{item.itm_content_eff_end_time | substringTime}}
                    </div>
                </div>
                <div class="class-tab-btn">
                    <div class="sign-up-tips-box" v-if="signUpTipsTwo && signUpItmId !== '' && signUpItmId == item.itm_id">
                        <div class="sign-up-tips">{{ $t("cos_tips_1") }}</div><!--一旦开始学习就不能取消报名-->
                        <em class="tips-close-icon" @click="signUpTipsTwo = false"></em>
                        <em class="triangle-icon-02"></em>
                    </div>
                    <div v-if="item.itm_has_lesson == false" class="color999 btn-box">{{ $t("cos_class_lesson_2") }}</div><!--日程表-->
                    <router-link tag="div" :to="`/schedule/${item.itm_id}?type=${type}`" v-if="item.itm_has_lesson == true" class="btn-box">{{ $t("cos_class_lesson_2") }}</router-link>
                    <!--取消报名-->
                    <div class="btn-box" v-if="signAgain(item) === $t('cos_cancel_the_registration')" @click="cancelEnrol(item.app.app_id)">
                        {{ $t("cos_cancel_the_registration") }}
                    </div>
                    <!--报名再学-->
                    <div class="btn-box" v-else-if="signAgain(item) === $t('cos_sign_again_2')" style="color: #999999">{{ $t("cos_sign_again_2") }}</div>
                    <!--报名再学一次-->
                    <div class="btn-box" v-else-if="signAgain(item) === $t('cos_sign_again')" @click="signUpFace(item)" :style="{color: (enrollChecked(item) ? '#333' : '#999')}">{{ $t("cos_sign_again") }}</div>
                    <!--已报名-->
                    <div class="btn-box" v-else-if="signAgain(item) === $t('cos_app_admitted')" style="color: #999999">{{ $t("cos_app_admitted") }}</div>
                    <!--我要报名-->
                    <div class="btn-box" v-else v-debounce="() => signUpFace(item)" :style="{color: (enrollChecked(item) ? '#333' : '#999')}">{{ $t("cos_want_signup") }}</div>
                </div>
            </div>
            <!--进行中-->
            <div v-if="timeStatus(item.itm_content_eff_start_time, item.itm_content_eff_end_time) == 'I'" class="class-tab-status" style="background:#5084EC;">
                {{ $t("cos_app_inprogress") }}
            </div>
            <!--未开始-->
            <div v-else-if="timeStatus(item.itm_content_eff_start_time, item.itm_content_eff_end_time) == 'W'" class="class-tab-status" style="background:#FB355C;">{{ $t("cos_time_not_start") }}</div>
            <!--已结束-->
            <div v-else class="class-tab-status" style="background:#CFCFCF;">{{ $t("cos_time_stop") }}</div>
        </div>
        </template>
        <!--暂无数据-->
        <div class="box-table white-bg" style="width:100%;height: 300px;" v-if="list.length == 0">
            <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                    <img src="../../../static/images/no-data.png" alt=""/>
                    <p class="color999">{{ $t("no_data") }}</p>
                </div>
            </div>
        </div>
        <!--课程冲突-->
        <van-dialog
        v-model="conflictTips"
        :title="$t('modal_title_notice')"
        :confirmButtonText="$t('sure')"
        >
            <p style="text-align:left;font-size: 14px;color: #999999;"> {{signUpMsg}}</p>
            <div>
                <div>{{ $t("menu_course") }}</div><!--课程-->
                <div @click="jumpParent(item.itmId)" style="margin-top: 10px;text-align:left;font-size: 14px;color: #5186f9;"  v-for="(item, index) in conflictCoures" :key="index">{{item.itmTitle}}</div>
            </div>
            <div style="margin-top: 25px;">
                <div>{{ $t("cos_type_class") }}</div><!--班级-->
                <div @click="jump(item.runItmId)" style="margin-top: 10px;text-align:left;font-size: 14px;color: #5186f9;"  v-for="(item, index) in conflictCoures" :key="index">{{item.runTitle}}</div>
            </div>
        </van-dialog>
        <!--有先修课程-->
        <div class="selectPopup" v-if="prerequisiteTips">
            <div class="selectPopup-body">
                <div class="close-box clearfix" @click="closeTips()"><i class="close-icon-02"></i></div>
                <p class="font-size16">{{ $t("cos_prerequisite_notice") }}</p><!--先修课程提示-->
                <div class="font-size14 color666">{{ $t("cos_prerequisite_tips") }}</div>
                <div class="con-box">
                    <div class="margin-top30" v-for="(item, index) in preConditionsCoures" :key="index">
                        <p>{{ $t("cos_prerequisite_condition") }}{{ index }}</p>
                        <ul class="list-01">
                            <li class="color1f5" v-for="info in item" :key="info.itmId" @click="jump(info.itmId)"><i class="disc-icon"></i>{{ info.itmTitle }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Class',
    data() {
        return {
            list: [],
            itemInfo: {},
            signUpMsg: this.$t('cos_app_admitted'), //已报名
            conflictTips: false,
            prerequisiteTips: false,
            conflictCoures: [],
            type: this.$route.query.type,
            signUpTipsTwo: false,
            signUpItmId: '',
            text: ''
        };
    },
    methods: {
        signUpFace(item) {
            if (!this.enrollChecked(item)) {
                return false;
            }
            this.$axios({
                method: 'POST',
                url: '/app/api/course/appliaction',
                params: {
                    itmId: item.itm_id
                }
            }).then(res => {
                if (res.data.result !== 'SUCCESS') {
                    switch (res.data.result) {
                    case 'ERROR_HAVE_CONFLICT':
                        if (res.data.conflictMap) {
                            if (res.data.conflictMap.conditionType === 1) {
                                this.text = this.$t('lab_enrol_conf1');
                            } else if (res.data.conflictMap.conditionType === 2) {
                                this.text = this.$t('lab_enrol_conf2');
                            } else if (res.data.conflictMap.conditionType === 3 && res.data.conflictMap.conflictRequirementMap) {
                                this.$emit('on-hide-bottom', true);
                                this.prerequisiteTips = true;
                                /*先修课程*/
                                this.preConditionsCoures = res.data.conflictMap.conflictRequirementMap;
                            } else if (res.data.conflictMap.conditionType === 5) {
                                this.conflictTips = true;
                                /*课程冲突*/
                                this.signUpMsg = this.$t('cos_class_enrolled');
                                this.conflictCoures = res.data.conflictMap.timeConfilictItmList;
                            }
                        }
                        break;
                    case 'ERROR_AEITEM_NOT_EXIST':
                        this.text = this.$t('lab_enrol_tip2');
                        break;
                    case 'ERROR_NO_DATA':
                        this.text = this.$t('lab_enrol_tip1');
                        break;
                    case 'ERROR_QUOTA_FULL':
                        this.text = this.$t('cos_full_capacity');
                        break;
                    case 'ERROR_BEFORE_APPLICATION_TIME':
                        this.text = this.$t('cos_sign_up_not_permitted_1');
                        break;
                    case 'ERROR_AFTER_APPLICATION_TIME':
                        this.text = this.$t('cos_sign_up_not_permitted_2');
                        break;
                    default:
                        this.text = this.$t('lab_enrol_tip3');
                    }
                    if (this.text !== '') {
                        this.$toast(this.text);
                    }
                } else {
                    this.$store.dispatch('getCourseInfo', this.$route.params.itmId, this.$route.params.tkhId);
                    this.$toast(this.$t('cos_app_admitted'));
                    this.signUpMsg = this.$t('cos_app_admitted'); //已报名
                    this.signUpItmId = item.itm_id;
                    this.signUpTipsTwo = true;
                }
            });
        },
        closeTips() {
            this.prerequisiteTips = false;
            this.$emit('on-hide-bottom', false);
        },
        timeStatus(startTime, endTime) {
            let nowDate = new Date().getTime();
            let start = this.conversionTime(startTime);
            let end = this.conversionTime(endTime);
            let status = '';
            if (nowDate < end && nowDate > start) {
                status = 'I';
            } else if (nowDate < end && nowDate < start) {
                status = 'W';
            } else if (nowDate > end && nowDate > start) {
                status = 'O';
            }
            return status;
        },
        jumpParent(id) {
            let itmId = this.wbEncryptor(id);
            this.$router.replace({path: `/course/${itmId}/0/composition`});
        },
        jump(id) {
            let itmId = this.wbEncryptor(id);
            this.$router.push({path: `/course/${itmId}/0`});
        },
        cancelEnrol(id) {
            this.$axios({
                method: 'POST',
                url: `/app/application/cancel?app_id=${id}`
            }).then(res => {
                //更新课程信息状态
                this.$store.dispatch('getCourseInfo', this.$route.params.itmId, this.$route.params.tkhId);
                this.$toast(this.$t('delete_enroll'));
                this.signUpTipsTwo = false;
                this.signUpMsg = this.$t('delete_enroll'); //已取消报名
            });
        },
        enrollChecked(item) {
            //是否在班级的开始日期
            if (new Date().getTime() < this.conversionTime(item.itm_appn_start_datetime) || new Date().getTime() > this.conversionTime(item.itm_appn_end_datetime)) {
                return false;
            }
            //名额不足
            if (item.itm_capacity > 0 && item.cnt_app_count >= item.itm_capacity) {
                return false;
            }
            return true;
        },
        signAgain(item) {
            if (!item.app) {
                //我要报名
                return this.$t('cos_want_signup');
            } else if (item.app.attempt === false && item.app.app_status === 'I') {
                //取消报名
                return this.$t('cos_cancel_the_registration');
            } else if (item.app.stress === true && ((item.app.attempt === true && item.app.app_status !== 'C' && item.app.app_status !== 'F') || (item.app.app_status === 'W'))) {
                //报名再学
                return this.$t('cos_sign_again_2');
            } else if ((item.app.app_status === 'C' || item.app.app_status === 'F') && this.itemInfo.itm_retake_ind === 1) {
                //报名再学一次
                return this.$t('cos_sign_again');
            } else if (item.app.stress === false && (item.app.attempt === true || item.app.app_status === 'W')) {
                //已经报名
                return this.$t('cos_app_admitted');
            } else {
                return this.$t('cos_want_signup');
            }
        }
    },
    mounted() {
        this.$store.watch((store, getters) => {
            if (getters.getDetail.item) {
                this.list = getters.getDetail.item.childrens;
                this.itemInfo = getters.getDetail.item;
            }
        });
    }
};
</script>

<style scoped lang="less">
    .class-tab{
        position: relative;
        padding: 12px 15px;
        .class-tab-nav{
            font-size: 16px;
            margin-bottom: 10px;
        }
        .class-tab-title{
            font-size: 12px;
            color: #999999;
            margin-top: 15px;
            margin-bottom: 9px;
        }
        .class-tab-date{
            font-size: 12px;
        }
        .class-tab-btn{
            overflow: hidden;
            .btn-box{
                width: 50%;
                float: left;
                height: 44px;
                text-align: center;
                line-height: 44px;
                background-color: #f5f5f5;
            }
        }
        .class-tab-status{
            position: absolute;
            top: 12px;
            left: 15px;
            padding: 4px 10px;
            height: 18px;
            color: #ffffff;
            line-height: 18px;
            font-size: 10px;
            border-top-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }
    }
    .selectPopup-body .font-size16 {
        font-size: 16px;
    }
    .margin-top30 {
        margin-top: 15px;
    }
    .selectPopup .selectPopup-body ul.list-01 li {
        margin-bottom: 15px;
        &:nth-of-type(1) {
            margin-top: 0;
        }
    }
    .disc-icon {
        float: left;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #1f53cc;
        margin: 7px 8px 0 0;
    }
    /deep/.van-dialog__content {
        margin: 0 40px;
    }
</style>
